<template>
  <div style="background:#FFF;padding: 20px">
      <div ref="charts" style="height: 700px"></div>
  </div>
</template>

<script>
import axios from 'axios'
import echarts from 'echarts'
var myChart
var dataSourc = []
var count = 0
var colorlist = ['#FF6600', '#FF8247', '#FF3030', '#FF1493', '#D02090', '#1E90FF', '#FFE1FF', '#EE1289', '#A020F0']
// function random (min, max) {
//     return Math.floor(Math.random() * (max - min)) + min
// }
export default {
    data () {
        return {
            cudata: '',
            dateList: [],
            echartData: []
        }
    },
    async mounted () {
        myChart = echarts.init(this.$refs.charts)
        dataSourc = await axios.get('/data/chart.json').then(({ data }) => data)
        console.log(JSON.stringify(dataSourc))
        this.dateList = dataSourc.date
        this.echartData = this.getydatalist()
        this.renderecharts()
        var dsq = setInterval(() => {
            this.echartData = this.getydatalist()
            this.renderecharts()
            if (count === (12 * 5)) {
                clearInterval(dsq)
            }
        }, 1000)
    },
    methods: {
        getydatalist () {
            this.cudata = this.dateList[count]
            var list = dataSourc.result.map((item, index) => {
                return {
                    name: item.name,
                    value: item.data[count],
                    data: {
                        value: item.data[count],
                        itemStyle: { color: colorlist[index] }
                    }
                }
            })
            count++
            return this.bubbleSort(list)
        },
        bubbleSort (arr) {
            var len = arr.length
            for (var i = 0; i < len; i++) {
                for (var j = 0; j < len - 1 - i; j++) {
                    if (arr[j].value > arr[j + 1].value) {
                        var temp = arr[j + 1]
                        arr[j + 1] = arr[j]
                        arr[j] = temp
                    }
                }
            }
            return arr
        },
        renderecharts () {
            var list1 = []
            var list2 = []
            this.echartData.map(item => {
                list1.push(item.name)
                list2.push(item.data)
            })
            var option = {
                title: {
                    text: this.cudata,
                    left: 96
                },
                grid: {
                    left: 100,
                    top: 50,
                    right: 20,
                    bottom: 50
                },
                xAxis: {
                    type: 'value',
                    splitLine: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    }
                },
                animation: true,
                animationDuration: 3000,
                animationUpdataDuration: 3000,
                yAxis: {
                    type: 'category',
                    data: list1
                },
                series: [{
                    data: list2,
                    type: 'bar',
                    barWidth: 30,
                    label: {
                        show: true,
                        color: '#000',
                        position: 'right'
                    }
                }]
            }
            myChart.setOption(option)
        }
    }
}
</script>

<style>

</style>
